<template>
  <div class="heart">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">企业</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a>企业信息</a></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="search">
      <div class="inp">
        <span style="margin-right: 15px">公司名称</span>
        <el-input v-model="companyName" style="width: 240px" placeholder="请输入公司名称" disabled/>
      </div>
      <el-button type="primary" style="width: 80px;" @click="search">查询</el-button>
    </div>
    <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
      <el-button type="primary" style="width: 80px;" @click="toAdd">添加</el-button>
      <el-button type="danger" style="width: 80px;" @click="deleteGroup">删除</el-button>
    </el-card>
    <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; margin-top: 20px"
    @selection-change="handleSelectionChange"
    @sort-change="handleSort"
  >
    <el-table-column type="selection" width="40" fixed/>
    <el-table-column label="创建日期"  sortable fixed>
      <template #default="scope">{{ scope.row.createTime.slice(0,10) }}</template>
    </el-table-column>
    <el-table-column prop="comName" label="企业名称"/>
    <el-table-column prop="comCode" label="统一社会信用代码" />
    <el-table-column prop="comContacts" label="报警联系人" />
    <el-table-column prop="comNumber" label="报警短信电话" />
    <el-table-column prop="comIndustry" label="行业" width="70"/>
    <el-table-column prop="comLocation" label="经纬度" />
    <el-table-column label="是否有生产线">
      <template #default="scope">
        {{ scope.row.comLine == 1 ? "是" : "否"}}
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button  @click="banCom(scope.$index, scope.row)" v-if="scope.row.comStatus == 0" size="small"
          >禁用</el-button
        >
        <el-button  @click="useCom(scope.$index, scope.row)" v-if="scope.row.comStatus == 1" size="small" type="primary"
          >启用</el-button
        >
        <el-button
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          size="small"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <Pagination v-model:page="page" :total="total" @pagination="getPagData" />
  </div>
  </div>
    
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, reactive,  } from 'vue'
import Pagination from '../../components/Pagination.vue'
import http from '../../http/http'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router';
  let companyName =  ref('米鹰讯2')
  onMounted(()=>{
    // console.log(tableData.value)
  })
  const tableData = ref()
  interface Company {
    comId: number,
    companyName: string,
    companyStatus: number,
    isImportant: boolean,
    createTime: string,
    uniCode: string,
    contactPerson: string,
    contactNumber: string,
    industry: string,
    location: number[],
    hasLine: boolean,
    isUsing: boolean
  }
  let selected = ref<number[]>([])
  const handleSelectionChange = (a:Company[])=>{
    selected.value = [];
    a.forEach((row:Company)=>{
      selected.value.push(row.comId)
    })
    console.log(selected.value)
  }
  // asc  desc
  let handleSort = (data: {column: any, prop: string, order: any })=>{
    console.log(data)
  }
  let size = ref(10)
  let total = ref(100)
  let page = ref(1)
  let order = ref('desc')
  let getData = (page:any,size:any,comName:any,order:any)=>{
      http.get('/api/company/page',{params:{
        page,
        size,
        comName,
        order
      }}).then((res)=>{
          console.log(111,res)
          tableData.value = res.data.records
          total.value = res.data.count - 0
      },(err)=>{
        console.log(err)
      })
    }
  getData(page.value,size.value,companyName.value,order.value)
  let getPagData = (page:any,size:any)=>{
    // page.value = page;
    // size.value = size;
    getData(page,size,companyName.value,order.value)
    // console.log(page,size)
  }
  let search = ()=>{
    getData(page.value,size.value,companyName.value,order.value)
  }
  let handleDelete = (index:any,row:any)=>{
    let arr = []
    arr.push(row.comId)
    http.delete('/api/company/delete',{
      params:{
        idList: arr.join(',')
      }
    }).then((res)=>{
      // console.log(res)
      getData(page.value,size.value,companyName.value,order.value)
      ElMessage.success('删除成功')
    },(err)=>{
      console.log(err)
    })
  }
  let banCom = (index:any,row:any)=>{
    http.post('/api/company/update',{
      comId: row.comId,
      comStatus: 1
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value)
        ElMessage.success('禁用成功')
      }else{
        ElMessage.error('禁用失败')
      }
    })
  }
  let useCom = (index:any,row:any)=>{
    http.post('/api/company/update',{
      comId: row.comId,
      comStatus: 0
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value)
        ElMessage.success('启用成功')
      }else{
        ElMessage.error('启用失败')
      }
    })
  }
  let deleteGroup = ()=>{
    http.delete('/api/company/delete',{
      params:{
        idList: selected.value.join(',')
      }
    }).then((res)=>{
      // console.log(res)
      getData(page.value,size.value,companyName.value,order.value)
      ElMessage.success('删除成功')
    },(err)=>{
      console.log(err)
    })
  }
  const router = useRouter();
  let toAdd = ()=>{
    // 路由跳转
    router.push('/company/edit')
  }
</script>
<style>
  .heart{
    width: 95%;
    margin: 20px auto;
  }
  .search{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
  }
  .pagination{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
</style>